import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({

  state: { // 存放数据 和data类似
    num: 0,
    name: 'seeu',
    token: '111111',
    isCollapse: false
  },

  mutations: { // 用来修改state和getters里面的数据
    setNum(state, newNum) {
      state.num = newNum
    },
    // 左侧展开隐藏
    collapseBtn(state) {
      state.isCollapse = !state.isCollapse
    }
  },

  getters: { // 相当于计算属性
    // state 就是上边定义的公共数据state
    // getter的名字1: function(state) {
    //   return 要返回的值
    // }
    // 写法1
    fnNum1: function(state) {
      return state.num
    },
    // 写法2
    fnNum2: state => state.num,

    fnName: function(state) {
      return `heelo${state.name}`
    }

  },

  actions: { // vuex中用于发起异步请求

  },

  modules: {// 拆分模块

  },
  // 要想持久化指定state，配置如下：
  // eslint-disable-next-line no-undef
  plugins: [createPersistedState({
    storage: window.sessionStorage,
    reducer(val) {
      return {
        isCollapse: val.isCollapse
        // activeMenu: val.activeMenu
      }
    }
  }),
  // eslint-disable-next-line no-undef
  createPersistedState({
    storage: window.localStorage,
    reducer(val) {
      return {
        // userInfo: val.userInfo,
        // isLogin: val.isLogin,
        // function: val.function,
        // isRoleView: val.isRoleView,
        // breadcrumbList: val.breadcrumbList
      }
    }
  })
  ]
})
